<template>
    <a-modal
      :bodyStyle="bodyStyle"
      :title="title"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :destroyOnClose="true"
      :maskClosable="false"
      @ok="() => { $emit('ok') }"
      @cancel="() => { $emit('cancel') }"
    >
      <a-form layout='vertical' :form="form">
        <a-form-item  class="a-form-item" v-bind="formItemLayout" label="版本号">
          <a-input
            v-decorator="[
              'version',
              {
                rules: [{ required: true, message: '请输入版本号!' }],
              }
            ]"
            placeholder="请输入版本号"
          />
        </a-form-item>
        <a-form-item  class="a-form-item" v-bind="formItemLayout" label="中文名称">
          <a-input
            v-decorator="[
              'categoryNameZn',
              {
                rules: [{ required: true, message: '请输入中文名称!' }],
              }
            ]"
            placeholder="请输入中文名称"
          />
        </a-form-item>
        <a-form-item class="a-form-item" v-bind="formItemLayout" label="英文名称">
          <a-input
            v-decorator="[
              'categoryNameEn',
              {
                rules: [{ required: true, message: '请输入英文名称!' }],
              }
            ]"
            placeholder="请输入英文名称"
          />
        </a-form-item>
        <a-form-item class="a-form-item" v-bind="formItemLayout" label="版权">
          <a-checkbox
            :checked="copyright"
            @change="onChangeCopyright"
            v-decorator="[
              'copyright',
              {
                rules: [{ required: false }],
              }
            ]"
          >有版权</a-checkbox>
        </a-form-item>
        <a-form-item class="a-form-item" v-bind="formItemLayout" label="状态">
          <a-checkbox
            :checked="disabled"
            @change="onChangeDisabled"
            v-decorator="[
              'disabled',
              {
                rules: [{ required: false }],
              }
            ]"
          >禁用</a-checkbox>
        </a-form-item>
        <a-form-item class="a-form-item" v-bind="formItemLayout" label="设计状态">
          <a-checkbox
            :checked="designEnd"
            @change="onChangeDesignEnd"
            v-decorator="[
              'designEnd',
              {
                rules: [{ required: false }],
              }
            ]"
          >设计结束</a-checkbox>
        </a-form-item>
        <a-form-item class="a-form-item" v-bind="formItemLayout" label="产品类型">
          <a-select
            v-decorator="[
              'productType',
              {
                rules: [{ required: true, message: '请选择产品类型!' }],
              }
            ]"
            placeholder="请选择产品类型">
            <a-select-option :value="item.dataValue" v-for="item in productTypes" :key="item.id">{{item.dataName}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="a-form-item" v-bind="formItemLayout" label="风格描述">
          <a-input v-decorator="[
              'styleRemark',
              {
                rules: [{ required: false, message: '请输入风格描述!' }],
              }
            ]"
            placeholder="请输入风格描述"
          />
        </a-form-item>
        <a-form-item class="a-form-item" v-bind="formItemLayout" label="封面">
          <a-upload
              listType="picture-card"
              class="avatar-uploader"
              :showUploadList="false"
              :beforeUpload="beforeUpload"
              v-decorator="['photoImage',{rules: [{ required: false, message: '请选择封面!' }]}]"
            >
              <img v-if="imageUrl" :src="imageUrl" alt="avatar"/>
              <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
        </a-form-item>
        <a-form-item>
          <a-input type="hidden" v-decorator="['id', {}]"/>
        </a-form-item>
      </a-form>
    </a-modal>
</template>
<script>
import Vue from 'vue'
import api from '@/core/Api'
import serv from './ImageCategoryService'
import { Select, Form, Upload, Button, Checkbox, Input, Modal } from 'ant-design-vue'
Vue.component(Select.name, Select)
Vue.component(Select.Option.name, Select.Option)
Vue.component(Form.name, Form)
Vue.component(Form.Item.name, Form.Item)
Vue.component(Upload.name, Upload)
Vue.component(Button.name, Button)
Vue.component(Checkbox.name, Checkbox)
Vue.component(Input.name, Input)
Vue.component(Modal.name, Modal)
export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
    this.productTypes = this.dictionary().PRODUCT_TYPE
    console.log(this.productTypes)
  },
  data () {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      bodyStyle: { height: 400 },
      productTypes: [],
      loading: false,
      imageUrl: '',
      copyright: false,
      disabled: false,
      designEnd: false,
      treeData: []
    }
  },
  props: {
    title: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    },
    confirmLoading: {
      type: Boolean,
      default: false
    },
    record: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    visible: function (nvalue) {
      !nvalue || this.getTree()
      if (nvalue && Object.keys(this.record).length > 0) {
        setTimeout(() => {
          this.form.setFieldsValue(this.record)
        }, 10)
        this.copyright = this.record.copyright
        this.designEnd = this.record.designEnd
        this.disabled = this.record.disabled === 1
        this.imageUrl = this.record.url
      } else {
        this.imageUrl = ''
        this.copyright = false
        this.disabled = false
        this.designEnd = false
      }
    }
  },
  methods: {
    handleChange (info) {
      console.log(info)
    },
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      if (!isJPG) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      const r = isJPG && isLt2M
      if (r) {
        api.getBase64(file, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
      return false
    },
    onChangeUrl (e) {
      console.log(11212)
    },
    onChangeCopyright (e) {
      this.copyright = e.target.checked
    },
    onChangeDesignEnd (e) {
      this.designEnd = e.target.checked
    },
    onChangeDisabled (e) {
      this.disabled = e.target.checked
    },
    async getTree () {
      this.treeData = await serv.getTree()
      console.log(this.treeData)
    },
    onSelect (selectedKeys, info) {
      console.log('selected', selectedKeys, info)
    },
    onCheck (checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
    }
  }
}
</script>

<style scoped>
img {
  max-width: 100%;
}

.a-form-item {
  margin-bottom: 0px;
}
</style>
